<!--会员中心购买按钮-->
<template>
  <div class="buy">
    <div class="paymentstate_h">
      <p>支付剩余时间</p>
      <van-count-down :time="time" class="payment_timesy" />
    </div>
    <van-cell-group>
      <van-cell class="paymentstate_h_cell" title="选择支付方式" />
    </van-cell-group>

    <van-cell-group>
      <van-cell>
        <div class="paymentstate_y_cell">
          <div><i class="iconfont icon-zhifubao alipay_hyt"></i></div>
          <div class="alipay_hy">支付宝</div>
          <div class="alipay_ht">
            <i
              :class="{
                iconfont: true,
                'icon-font40': true,
                clickbgc3: true,
                clickbgc1: tdc,
                clickbgc6: c1,
              }"
              @click="dianji_hyts1"
            ></i>
          </div>
        </div>
      </van-cell>
      <van-cell>
        <div class="paymentstate_y_cell">
          <div><i class="iconfont icon-weixin alipay_hyts"></i></div>
          <div class="alipay_hy">微信<span>&nbsp;&nbsp;&nbsp;</span></div>
          <div class="alipay_hts">
            <i
              :class="{
                iconfont: true,
                'icon-font40': true,
                clickbgc3: true,
                clickbgc5: tdcc,
              }"
              @click="dianji_hyts2"
            ></i>
          </div>
        </div>
      </van-cell>
    </van-cell-group>
    <van-button class="btn_h_y" type="primary" @click="querten_fu"
      >确认支付</van-button
    >

    <van-popup
      v-model="show5"
      :class="{
        msgF1: true,
        animate__animated: dada1,
        animate__bounceIn: dada2,
        animate__slow: dada3,
      }"
    >
      <div class="msg1">
        <div>
          <i class="iconfont icon-alert impdiv1"></i>
        </div>
        <p class="msg_p1">{{ message1 }}</p>
        <button class="button2" @click="dingclick">确定</button>
      </div>
    </van-popup>
    
    <van-popup
      v-model="show8"
      :class="{
        msgF2: true,
        animate__animated: dadada1,
        animate__bounceIn: dadada2,
        animate__slow: dadada3,
      }"
    >
      <div class="msg2">
        <div>
          <i class="iconfont icon-alert impdiv1"></i>
        </div>
        <p class="msg_p1">{{ message2 }}</p>
        <button class="button2" @click="zhuanclick">确定</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import { Popup } from 'vant';
import { Cell, CellGroup } from 'vant';
import { Button } from 'vant';
import { CountDown } from 'vant';

Vue.use(CountDown);
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Popup);
export default {
  name: "Buy",
  data() {
    return {
      time: 15 * 60 * 1000,
      tdc: false,
      c1: true,
      show5: true,
      message1: "暂不开放支付功能",
      message2: "当前环境无法支付，请打开官方APP进行付款",
      dada1: true,
      dada2: true,
      dada3: true,
      show8: false,
      dadada1:false,
      dadada2:false,
      dadada3:false,
    };
  },
  methods: {
    dianji_hyts1() {
      this.tdc = true;
      this.tdcc = false;
    },
    dianji_hyts2() {
      this.tdcc = true;
      this.tdc = false;
      this.c1 = false;
    },
    dingclick(){
        this.show5 = false;
        this.dada1 = false;
        this.dada2 = false;
        this.dada3 = false;
    },
    querten_fu(){
        this.show8 = true;
        this.dadada1 = true;
        this.dadada2 = true;
        this.dadada3 = true;
    },
    zhuanclick(){
        console.log("页面跳转");
    }
  },
};
</script>

<style lang="less">
body {
  background-color: #f5f5f5;
}
.buy {
  .paymentstate_h {
    background-color: #fff;
    text-align: center;
    p {
      display: inline-block;
      font-size: 14px;
      color: #666666;
      padding-top: 40px;
      padding-bottom: 10px;
    }
    .payment_timesy {
      font-size: 35px;
      padding-top: 10px;
      padding-bottom: 50px;
    }
  }
  .paymentstate_h_cell {
    color: #666666;
    font-size: 16px;
    background-color: #f5f5f5;
    border: none;
  }
  .paymentstate_y_cell {
    display: flex;
    height: 79px;
    align-items: center;
  }
  .alipay_hyt {
    font-size: 50px;
    color: #00a3ed;
  }
  .alipay_hy {
    font-size: 16px;
    color: #666666;
    padding-left: 5px;
  }
  .alipay_ht {
    margin-left: 210px;
  }
  .alipay_hts {
    margin-left: 220px;
    i {
      font-size: 30px;
      color: #cccccc;
    }
  }
  .alipay_hyts {
    font-size: 52px;
    color: #00c450;
  }
  .btn_h_y {
    width: 342px;
    margin-left: 16.5px;
    border-radius: 3px;
    margin-top: 15px;
    background-color: #00dc6e;
  }
  .clickbgc3 {
    font-size: 30px;
    color: #cccccc;
  }
  .clickbgc1 {
    color: #00dc6e;
  }
  .clickbgc5 {
    color: #00dc6e !important;
  }
  .clickbgc6 {
    color: #00dc6e !important;
  }
  .dolonghys {
    width: 281px;
    height: 166px;
    text-align: center;
    .dolonghys_ht {
      margin-top: 8px;
      margin-bottom: 8px;
      i {
        font-size: 75px;
        color: #ffc984;
      }
      div {
        font-size: 16px;
        color: #333333;
      }
    }
  }
  .dolonghys_hytS {
    background-color: #00dc6e;
    width: 281px;
    padding: 7px 0;
    border: none;
    margin-top: 11px;
  }
  .msgF1 {
    border-radius: 10px;
    margin: -20% -37%;
    display: none;
    .msg1 {
      width: 281.25px;
      text-align: center;

      .impdiv1 {
        font-size: 80px;
        color: #f8cb86;
        font-weight: 200;
      }
      .msg_p1 {
        color: #333333;
        margin-top: 10px;
      }
      .button2 {
        width: 100%;
        height: 42px;
        margin-top: 20px;
        background-color: #4cd964;
        border: none;
      }
    }
  }
  .animate__animated {
    display: block;
  }
  .msgF2 {
    border-radius: 10px;
    margin: -20% -37%;
    // display: none;
    .msg2 {
      width: 281.25px;
      text-align: center;

      .impdiv1 {
        font-size: 80px;
        color: #f8cb86;
        font-weight: 200;
      }
      .msg_p1 {
        color: #333333;
        margin-top: 10px;
      }
      .button2 {
        width: 100%;
        height: 42px;
        margin-top: 20px;
        background-color: #4cd964;
        border: none;
      }
    }
  }
}
</style>